<template>
  <div>
    <el-input :placeholder="placeholder" size="medium" v-model="changeValue" readonly>
      <template #append>
        <el-button style="width: 100px" icon="el-icon-full-screen" @click="handleScanCode"> 扫 码 </el-button>
      </template>
    </el-input>
    <scan-code ref="scanCode" @change="handleScanChange" />
  </div>
</template>

<script>
import mixin from '../mixin'
import ScanCode from './ScanCode'

export default {
  name: 'TScan',
  components: { ScanCode },
  mixins: [mixin],
  props: {
    placeholder: {
      type: String,
      default: ''
    },
    openCut: {
      type: Boolean,
      default: false
    },
    cutStart: {
      type: Number,
      default: null
    },
    cutEnd: {
      type: Number,
      default: null
    }
  },
  created() {},
  methods: {
    handleScanCode() {
      this.$refs.scanCode.openModal()
    },
    handleScanChange(value) {
      if (value) {
        if (this.openCut) {
          value = value.substring(this.cutStart - 1, this.cutEnd)
        }
      }
      this.changeValue = value
    }
  }
}
</script>

<style lang="scss" scoped>
.scan {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
</style>
